<template>
	<picker @change="$emit('change', $event.detail.value, row)" :value="row.category" :range="categories" range-key="label">
		<uni-tag size="small" :type="tagType(row.category)">{{ getCategoryLabel(row.category) }}</uni-tag>
	</picker>
</template>

<script setup lang="ts">
defineProps<{ row: any }>();
defineEmits(['change']);

const categories = [
	{ value: 1, label: '保健品' },
	{ value: 2, label: '食品' },
	{ value: 3, label: '日用品' },
	{ value: 4, label: '其他' }
];

const getCategoryLabel = (val: number) => {
	return categories.find((c) => c.value === val)?.label || '未分类';
};

const tagType = (val: number) => {
	return ['default', 'primary', 'success', 'warning', 'error'][val] || 'default';
};
</script>
